<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
			
	</head>
	<body>
		<div id="app">
			<div align="center">
				<div style="width: 500px;text-align: left;">
					<button type="button" @click="flag = true">添加</button>
				</div>
				<div v-show="flag">
					<input v-show="student.id" type="text" v-model="student.id">
					<input v-model="student.name"  type="text" placeholder="请输入学生姓名">
					<button type="button" @click="save">保存</button>
				</div>
				<table border="1" width="500px" >
					<tr>
						<th>id</th>
						<th>姓名</th>
						<th>操作</th>
					</tr>
					<tr v-for="stu in students" :key="stu.id">
						<th>{{stu.id}}</th>
						<th>{{stu.name}}</th>
						<th>
							<a href="javascript:void(0)" @click="student = stu">编辑</a>
							<a href="">删除</a>
						</th>
					</tr>
				</table>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el:"#app",
			data:{
				flag:false,
				student:{},
				students:[
					{
						id:1,
						name:"张三"
					},
					{
						id:2,
						name:"李四"
					},
					{
						id:3,
						name:"王五"
					}
				]
			},
			created() {
				
			},
			methods:{
				save(){
					let id = this.students.length+1
					this.student.id = id
					this.students.push(this.student)
					this.student={}
				}
			}
		})
	</script>
</html>
